<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
  <p>id:{{ id }}</p>
  <p>name:{{ name }}</p>
  
  <p v-on:click="test_get">aaa</p>
  <button v-on:click="test_get">zzz</button>
  <button v-on:click="test_get2">ppp</button>
  
  <img src='https://api.cz-yun.com/htcm/images/drag.jpg'  style="width:100px; height:130px" />
  <!-- <img src='./images/drag.jpg'  style="width:100px; height:130px" /> -->
  <!-- <img :src="imgsrc"  style="width:100px; height:130px" /> -->
  
  <ul class="tab-tilte">
      <li @click="cur=0" :class="{active:cur==0}">标题一</li>
      <li @click="cur=1" :class="{active:cur==1}">标题二</li>
      <li @click="cur=2" :class="{active:cur==2}">标题三</li>
      <li @click="cur=3" :class="{active:cur==3}">标题四</li>
  </ul>
  <div class="tab-content">
      <div v-show="cur==0">内容一</div>
      <div v-show="cur==1">内容二</div>
      <div v-show="cur==2">内容三</div>
      <div v-show="cur==3">内容四</div>
  </div>
  
</div>

<script>
new Vue({
  el: '#app',
  data: {
    id: 'Hello Vue2.js!',
    name:'',
    imgsrc:'',
    cur:0 //默认选中第一个tab
  },
  
  mounted:function(){
	  
	  //this.test_get3();//在html加载完成后进行，相当于在页面上同步显示后端数据
  },
  
  methods:{
	  /* test_post:function(){
          //发送 post 请求
          this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
              document.write(res.body);    
          },function(res){
              console.log(res.status);
          });
      }, */
  
	  test_get:function(){
		  var _this= this;
		  
	      //发送get请求
	      this.$http.get('http://localhost:8080/web2/getDeviceByDeviceId',{
	    	    params: {
	    	    	deviceId:'863958040771722'
	    	    }
	      })
	      .then(function(res){
	          //document.write(res.body);   
			  alert(""+res);
			  // alert(""+JSON.stringify(res));
			        	        
			  // alert(res.body[0]+"=="+res.body[0].id);
	          // alert(res);
	          
	          _this.id = res.body.id;
	          _this.name = res.body.name;
	          _this.imgsrc = res.body.uijson;	//./images/drag.jpg		src='./images/drag.jpg'
	      },function(){
	          console.log('请求失败处理');
	      }); 
	      
	      //alert('ttt');
	      //console.log('请求失败处理');
	  },
	  
	  test_get2:function(){
	      //发送get请求	http://127.0.0.1:8080/web2/getServerList?telephone=1&flag=1
		  // alert(2)
		  var _this= this;
	      _this.$http.get('http://127.0.0.1:8080/web2/getServerList',{
	    	    params: {
	    	    	telephone:'1',
					flag:"1"
	    	    }
	      })
	      .then(function(res){
	          //document.write(res.body);   
			  alert(res);
	          alert(res.body);
	      },function(){
	          console.log('请求失败处理');
	      }); 
	      
	      //alert('ttt');
	      //console.log('请求失败处理');
	  },
	  
	  test_get3:function(){
	      //发送get请求	http://127.0.0.1:8080/web2/getServerList?telephone=1&flag=1
	  	  // alert(2);
			  
		  this.$http.get('http://localhost:8080/web2/getServerList',{
				params: {
					telephone:'1',
					flag:true
				}
		  })
		  .then(function(res){
			  //document.write(res.body);   
			  //alert(""+res);
			  // alert(""+JSON.stringify(res));
			  
			  alert(res.body[0]+"=="+res.body[0].id);
			  // alert(res)
			this.ss = res.body;
		  },function(){
			  console.log('请求失败处理');
		  });
	  }
  }
  
})
</script>


<style type="text/css">
        ul li {

            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .tab-tilte{
            width: 90%;
        }
        .tab-tilte li{
            float: left;
            width: 25%;
            padding: 10px 0;
            text-align: center;
            background-color:#f4f4f4;
            cursor: pointer;
        }
     /* 点击对应的标题添加对应的背景颜色 */
        .tab-tilte .active{
            background-color: #09f;
            color: #fff;
        }
        .tab-content div{
            float: left;
            width: 25%;
            line-height: 100px;
            text-align: center;
        }
    </style>

</body>
</html>